<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>通讯录管理</title>
		<meta name="author" content="Designed By ZYB">
		<meta name="description" content="通讯录管理">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
		<!-- Bootstrap的select标签库 -->
		<link href="//cdn.bootcss.com/bootstrap-select/1.9.3/css/bootstrap-select.min.css" rel="stylesheet">
		<!-- Bootstrap社交图标文件   -->
		<link href="//cdn.bootcss.com/bootstrap-social/4.11.0/bootstrap-social.min.css" rel="stylesheet">
		<!--font-awesome字体库-->
		<link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
		<!-- zTree样式 -->
		<link rel="stylesheet" href="css/zTreeStyle.css" />
		<link rel="stylesheet" href="css/hz-font.css" />
		<link rel="stylesheet" href="css/index.css" />
		<style type="text/css">
			.btn.btn-default.save {
				font-weight: lighter;
				border-color: #15c288;
				color: #FFFFFF;
				background: #15c288;
				-webkit-transition-duration: 500ms;
				transition: all .3s ease-in-out;
			}
			
			.btn.btn-default.save:hover {
				border-color: #15c288;
				color: #15c288;
				background: #FFFFFF;
				-webkit-transition-duration: 500ms;
				transition: all .3s ease-in-out;
			}
			
			.selectpicker.form-control {
				border-color: #15c288;
				color: #15c288;
				background: #FFFFFF;
				-webkit-transition-duration: 500ms;
				transition: all .3s ease-in-out;
			}
			
			.necessary {
				color: red;
			}
			
			p.col-md-10 {
				color: #CCCCCC;
			}
			
			.lasttdpop {
				background: none repeat scroll 0 0 black;
				border-radius: 6px;
				box-shadow: 0 0 6px black;
				height: 30px;
				max-width: 255px;
				padding: 6px 20px;
				position: absolute;
				right: 14%;
				text-align: center;
				min-width: 155px;
			}
			
			.lasttdpop a {
				color: white;
				outline: medium none;
				width: 40px;
				display: inline-block;
				padding: 0 5px;
				display: block\9;
				float: left\9;
			}
			
			.selectpicker {
				width: auto;
			}
			
			.col-sm-10.iradio {
				padding-top: 7px;
			}
			
			.list-group button{
				text-align: center;
			}
			/* iCheck plugin Square skin, blue
----------------------------------- */
			
			.icheckbox_square-blue,
			.iradio_square-blue {
				display: inline-block;
				*display: inline;
				vertical-align: middle;
				margin: 0;
				padding: 0;
				width: 18px;
				height: 18px;
				background: url(./img/blue.png) no-repeat;
				border: none;
				cursor: pointer;
			}
			
			.icheckbox_square-blue {
				background-position: 0 0;
			}
			
			.icheckbox_square-blue.hover {
				background-position: -18px 0;
			}
			
			.icheckbox_square-blue.checked {
				background-position: -36px 0;
			}
			
			.icheckbox_square-blue.disabled {
				background-position: -54px 0;
				cursor: default;
			}
			
			.icheckbox_square-blue.checked.disabled {
				background-position: -72px 0;
			}
			
			.iradio_square-blue {
				background-position: -90px 0;
			}
			
			.iradio_square-blue.hover {
				background-position: -108px 0;
			}
			
			.iradio_square-blue.checked {
				background-position: -126px 0;
			}
			
			.iradio_square-blue.disabled {
				background-position: -144px 0;
				cursor: default;
			}
			
			.iradio_square-blue.checked.disabled {
				background-position: -162px 0;
			}
			/* Retina support */
			
			@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
			only screen and (-moz-min-device-pixel-ratio: 1.5),
			only screen and (-o-min-device-pixel-ratio: 3/2),
			only screen and (min-device-pixel-ratio: 1.5) {
				.icheckbox_square-blue,
				.iradio_square-blue {
					background-image: url(blue@2x.png);
					-webkit-background-size: 180px 18px;
					background-size: 180px 18px;
				}
			}
			
			body{
				position: relative;
			}
			
			iframe{
				width:100%;
				height:500px;
			}
		</style>
	</head>

	<body class="group-page">

		<nav class="navbar navbar-main navbar-static-top">
			<div class="container header">
				<div class="row">
					<div class="navbar-header col-md-2">
						<a href="/" class="navbar-brand-home">
							<img src="logo.png" alt="logo" height="50px" width="125px"></img>
						</a>
						<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>
					<div class="collapse navbar-collapse col-md-10">
						<ul class="nav navbar-nav home">
							<li class="header_li">
								<a href="#">内容管理</a>
							</li>
							<li class="header_li">
								<a href="#">通讯录管理</a>
							</li>
							<li class="header_li">
								<a href="#">设置中心</a>
							</li>
							<li class="header_li">
								<a href="#">帮助</a>
							</li>
						</ul>
						<div class="pull-right">
							<ul class="nav nav-pills ">
								<li>
									<div class="dropdown text-center">
										<img data-toggle="dropdown" class="img-circle dropdown-toggle  navbar-btn" src="css/img/wjy_icon.png" id="dropdownMenu1">
										<ul class="dropdown-menu text-center" role="menu" aria-labelledby="dropdownMenu1" style="padding-bottom: 0;margin-top: -1px;">
											<li role="presentation"><img src="css/img/wjy_icon.png" width="50px" height="50px" alt="头像" class="img-thumbnail" />王敬业</li>
											<li class="li-dropdown" role="presentation" style="border-top: solid 1px #5BC0DE;"><a class="text-center" tabindex="-1" href="#"><span class="glyphicon glyphicon-home"></span> 返回首页 </a></li>
											<li class="li-dropdown" role="presentation" style="border-top: solid 1px #5BC0DE;">
												<a role="text-center" tabindex="-1" href="#"> <span class="glyphicon glyphicon-user"></span> 个人中心 </a>
											</li>
											<li role="presentation" class="li-dropdown" style="border-top: solid 1px #5BC0DE;"><a role="text-center" tabindex="-1" href="#"><span class="glyphicon glyphicon-log-out"></span> 退出登录</a></li>
										</ul>
									</div>
								</li>
								<li style="height: 50px;">
									<a href="#" class="btn navbar-btn" id="message">
										<span class="badge pull-right">42</span>消息
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
		<div class="container" id="inner-content">
			<div class="row">
				<div class="col-md-3">
					<div class="side-container panel panel-default">
						<div class="panel-heading" id="side_tittle">部门架构</div>
						<div class="panel-body" id="side_body">
							<div id="orgTree" class="ztree showIcon"></div>
						</div>
					</div>
				</div>
				<div class="col-md-9">
					<div class="main-container panel panel-default">
						<div class="btn-toolbar panel-body" id="btn-tool" role="toolbar" style="">
							<div class="btn-group" style="border-left: none;padding-left: 8%;">
								<button class="btn btn-default imp-exp" onclick="synchronize()">同步|导入</button>
								<button class="btn btn-default imp-exp">导出</button>
							</div>
							<div class="btn-group" style="">
								<button class="btn btn-default" data-toggle="modal" data-target=".addmember">新增</button>
								<button type="button" class="btn btn-default" data-toggle="modal" data-target=".move">移动</button>
								<button class="btn btn-default">删除</button>
							</div>
							<div class="btn-group input-group" style="width: 40%;border-right: none;float: right;">
											<input type="text" class="form-control" id="input_search" placeholder="姓名\拼音\手机号\首字母">
											<span class="input-group-btn">
									  		<button type="submit" class="btn btn-default" style="border-radius: 0px 20px 20px 0px;"><span class="glyphicon glyphicon-search"></span></button>
											</span>
							</div>
						</div>
					</div>
					<div class="main-container panel panel-default">

						<div class="panel-body table-responsive" style="padding-bottom: 0;">
							<table class="table table-line">
								<thead>
									<tr>
										<th width="20">
											<input type="checkbox" class="form-checkbox" onclick="_doCheck(this,'ids')">
										</th>
										<th width="30"></th>
										<th width="100">姓名</th>
										<th>账号</th>
										<th width="150">手机号</th>
										<th>部门</th>
										<th>职位</th>
										<th>状态</th>
										<th width="100">操作</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<div class="row" style="margin: auto;">
								<nav class="text-center nav-page">
								</nav>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 选择部门 -->
		<div class="panel panel-default" id="selectDepartment" style="display:none; position: absolute;">
			<div class="panel-body menuContent" id="side_body">
				<ul id="depTree" class="ztree" style="margin-top:0;"></ul>
			</div>
		</div>
		
		

		<div class="list-group" id="rMenu">
			<button type="button" id="m_add" class="list-group-item" onclick="addTreeNode();" data-toggle="modal" data-target="#addDep"><span class="glyphicon glyphicon-plus-sign" style="margin-right: 10px;"></span>增加</button>
			<button type="button" id="m_del" class="list-group-item" onclick="removeTreeNode();"><span class="glyphicon glyphicon-minus-sign" style="margin-right: 10px;"></span>删除</button>
			<button type="button" id="m_edit" class="list-group-item" onclick="editTree();"><span class="glyphicon glyphicon-edit" style="margin-right: 10px;"></span>编辑</button>
			<button type="button" id="m_addMember" class="list-group-item" onclick="addMember();"><span class="glyphicon glyphicon-user" style="margin-right: 10px;"></span>添加成员</button>
		</div>

		<!-- 增加部门 -->
		<div class="modal fade" id="addDep" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">添加部门</h4>
					</div>
						<div class="modal-body">
							<form class="form-horizontal" id="addDepForm">
								<input type="hidden" name="corpId" id="corpId" value="wxa75fcc28f7f6401a">
								<input type="hidden" name="parentId" id="parentId" value="">
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="necessary">*</span>部门名称</label>
									<div class="col-sm-10">
										<input class="form-control" name="name" id="depName" placeholder="部门名称">
									</div>
								</div>
								<div class="col-sm-offset-2">
									<p>&nbsp;&nbsp;请填写部门完整名称</p>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">权限选择</label>
									<div class="dropdown col-sm-10">
										<select class="selectpicker form-control" name="selectpicker" style="width: auto;">
											<option>请选择</option>
											<option>所有人</option>
											<option>仅本部门</option>
											<option>仅子部门</option>
										</select>
									</div>
								</div>
								<div class="col-sm-offset-2">
									<p>&nbsp;&nbsp;所有人：可以看到所有人通讯录</p>
									<p>&nbsp;&nbsp;仅本部门：可以看到同一部门下所有子组织通讯录</p>
									<p>&nbsp;&nbsp;仅子部门：可以看到所在子部门及下属子组织通讯录</p>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="necessary">*</span>排序号</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="depOrder" id="depOrder" placeholder="排序号">
									</div>
								</div>
								<div class="col-sm-offset-2">
									<p>&nbsp;&nbsp;用于显示部门先后顺序，数字小的排在前面</p>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="submit" class="btn btn-default save" onclick="saveDep();" data-dismiss="modal">保存</button>
						</div>
				</div>
			</div>
		</div>
		<!--移动模态框-->
		<div class="modal fade move" role="dialog" aria-labelledby="gridSystemModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="gridSystemModalLabel">移动成员</h4>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div id="checkedOrgTree" class="ztree showIcon"></div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

		<!--新增成员模态框-->
		<div class="modal fade addmember" role="dialog" aria-labelledby="gridSystemModalLabel" onscroll="selectScroll();">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="gridSystemModalLabel">新增成员</h4>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<form class="form-horizontal">
								<div class="form-group">
									<label class="col-sm-2 control-label" for="inputUsername">*姓名:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputUsername" placeholder="成员姓名">
									</div>
								</div>
								<div class="form-group">
									<label for="inputNickname" class="col-sm-2 control-label">昵称:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputNickname" placeholder="可在新闻公告应用的生日祝福等场景使用">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-2 control-label">性别:</label>
									<div class="col-md-2">
										<select class="selectpicker form-control">
											<option>请选择</option>
											<option>男</option>
											<option>女</option>
										</select>
									</div>
								</div>
								<hr/>
								<div class="col-sm-offset-2">
									<p>&nbsp;&nbsp;! 身份验证信息（以下三种信息不可同时为空）</p>
								</div>
								<div class="form-group">
									<label for="inputWeixinId" class="col-sm-2 control-label">微信号:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputWeixinId" placeholder="可通过微信号匹配关注">
									</div>
								</div>
								<div class="form-group">
									<label for="inputMobilePhone" class="col-sm-2 control-label">手机号:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputMobilePhone" placeholder="可通过手机对应的微信号对应关注">
									</div>
								</div>
								<div class="form-group">
									<label for="inputMail" class="col-sm-2 control-label">邮箱:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputMail" placeholder="若未匹配到微信号，则通过邮箱验证身份">
									</div>
								</div>
								<hr/>
								<div class="form-group">
									<label for="inputDepartment" class="col-sm-2 control-label">所属部门:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputDepartment" placeholder="选择部门" onclick="showMenu();">
									</div>
								</div>
								<div class="form-group">
									<label for="inputPosition" class="col-sm-2 control-label">职位:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputPosition">
									</div>
								</div>
								<div class="form-group">
									<label for="inputWorkTime" class="col-sm-2 control-label">入职时间:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputWorkTime">
									</div>
								</div>
								<div class="form-group">
									<label for="inputIDNumber" class="col-sm-2 control-label">身份证:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputIDNumber" placeholder="请正确输入18位身份证号">
									</div>
								</div>
								<div class="form-group">
									<label for="inputQQNumber" class="col-sm-2 control-label">QQ:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputQQNumber">
									</div>
								</div>
								<div class="form-group">
									<label for="inputTelephone" class="col-sm-2 control-label">电话:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputTelephone">
									</div>
								</div>
								<div class="form-group">
									<label for="inputTelephone2" class="col-sm-2 control-label">电话2:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputTelephone2">
									</div>
								</div>
								<div class="form-group">
									<label for="inputAddress" class="col-sm-2 control-label">地址:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputAddress">
									</div>
								</div>
								<div class="form-group">
									<label for="inputSolarBirthday" class="col-sm-2 control-label">阳历生日:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputSolarBirthday">
									</div>
								</div>
								<div class="form-group">
									<label for="inputLunarBirthday" class="col-sm-2 control-label">农历生日:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="inputLunarBirthday" placeholder="如农历九月十八，则填写: 09-18">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">*生日提醒:</label>
									<div class="col-sm-10 iradio">
										<label>
											<input type="radio" name="inputBirthdayRemind" id="optionsRadios1" value="option1" checked> 按阳历
										</label>
										<label>
											<input type="radio" name="inputBirthdayRemind" id="optionsRadios2" value="option2"> 按农历
										</label>
									</div>
								</div>
								<div class="form-group">
									<label for="inputRemark" class="col-sm-2 control-label">备注:</label>
									<div class="col-sm-10">
										<textarea class="form-control" id="inputRemark"></textarea>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

		<footer class="footer navbar-static-bottom">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<a href="/"><img src="logoCP.png" width="175px" style="margin-top: -11px;" height="75px" alt="好知，知识分享新社区"></a>
					</div>
					<div class="col-md-4 about">
						<span><a href="/info/about">关于我们</a></span>|
						<span><a href="/group/feedback/discuss/15754" target="_blank">加入我们</a></span>|
						<span><a href="/daren/" target="_blank">合作申请</a></span>|
						<span><a href="/group/feedback">意见反馈</a></span>
						<br>
						<a class="con" href="http://www.miibeian.gov.cn/" target="_blank"> 浙ICP备13006852号-3</a>
					</div>
					<div class="col-md-4">关注我们：
						<a href="http://weibo.com/howzhicom"><i class="hz-icon icon-weibo"></i></a>
						<a class="icon-sns">
							<i class="hz-icon icon-weixin"></i>
							<div class="sns-popover" style="background:url(&quot;img/weichat.png?2.6.12.2.3&quot;)"></div>
						</a>
						<a href="http://user.qzone.qq.com/2485597828/"><i class="hz-icon icon-qq"></i></a>
						<a href="http://site.douban.com/124522/"><i class="hz-icon icon-gongnengyedouban"></i></a>
					</div>
				</div>
			</div>
		</footer>
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<!-- BootStrap iCheck样式 -->
		<script src="//cdn.bootcss.com/iCheck/1.0.1/icheck.min.js"></script>
		<!-- Ztree JS -->
		<script type="text/javascript" src="js/jquery.ztree.core-3.5.min.js"></script>
		<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.min.js"></script>
		<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>
		<!-- Customed -->
		<script type="text/javascript" src="js/orgZTree.js"></script>
		<script type="text/javascript" src="js/checkOrgTree.js"></script>
		<script type="text/javascript" src="js/selectDepTree.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>